<template>
  <com-paging>
    <view class="container">
      <view class="back" @click="toPage()">
        <view class="iconfont icon-forward"></view>
        <view class="text">返回</view>
      </view>
      <view class="selects">
        <com-select v-model="state.select1">
          <com-option v-for="item in selectList.one" :="item"></com-option>
        </com-select>
        <com-select v-model="state.select2" :multiple="true" :clearable="true">
          <com-option v-for="item in selectList.two" :="item"></com-option>
        </com-select>
        <com-select v-model="state.select3" value-key="id">
          <com-option v-for="item in selectList.three" :="item"></com-option>
        </com-select>
        <com-select v-model="state.select4" :multiple="true" value-key="id" :collapse-tags="true">
          <com-option v-for="item in selectList.four" :="item"></com-option>
        </com-select>
        <com-select v-model="state.select5" :remote="true" :remote-method="config.fiveSelect">
          <com-option v-for="item in selectList.five" :="item"></com-option>
        </com-select>
        <com-select v-model="state.select6" :multiple="true" value-key="id" :remote="true"
          :remote-method="config.sixSelect" :debouce="300" :paging-props="{
            modelValue: selectList.six,
            'onUpdate:modelValue': list => selectList.six = list
          }">
          <com-option v-for="item in selectList.six" :="item">
            <image mode="heightFix" class="image" :src="localFile.getImage('logo')"></image>
            <view class="label">{{ item.label }}</view>
          </com-option>
        </com-select>
      </view>
      <view class="images">
        <com-image v-for="item in 10" :lazy="true" :index="item"
          @click="state.select2 = []"
          src="https://cdn.pixabay.com/animation/2023/01/24/22/44/22-44-04-445_512.gif"
          :image-props="{ mode: 'widthFix' }"></com-image>
      </view>
    </view>
  </com-paging>
</template>

<script lang="ts" setup>
import { SelectNS, OptionNS } from '@/components'
import { awaitSetTimeout, toPage } from '@/utils'
import { localFile } from '@/utils/local-file'
import { reactive } from 'vue'

const selectList: Record<'one' | 'two' | 'three' | 'four' | 'five' | 'six', OptionNS.Props[]> = reactive({
  one: Array.from({ length: 20 }).map((_, i) => ({
    disabled: i === 5,
    label: '基本单选' + i,
    value: i
  })),
  two: Array.from({ length: 20 }).map((_, i) => ({
    disabled: i === 3,
    label: '基本多选' + i,
    value: i
  })),
  three: Array.from({ length: 20 }).map((_, i) => ({
    disabled: i === 3,
    label: '对象单选' + i,
    value: { id: i, value: i }
  })),
  four: Array.from({ length: 20 }).map((_, i) => ({
    disabled: i === 3,
    label: '对象多选' + i,
    value: { id: i, value: i }
  })),
  five: [],
  six: []
})
const state = reactive({
  select1: selectList.one[0].value,
  select2: selectList.two.slice(2, 5).map(item => item.value),
  select3: selectList.three[0].value,
  select4: selectList.two.slice(2, 5).map(item => item.value),
  select5: undefined,
  select6: [],
})
const config = {
  selectBaseList: Array.from({ length: 300 }).map((_, i) => 'remoteMethod ' + i),
  fiveSelect(param: Parameters<(SelectNS.Props['remoteMethod'] & {})>[0]) {
    selectList.five = []
    let i = 0
    for (const item of config.selectBaseList) {
      if (item.includes(param.text) || !param.text) {
        selectList.five.push({
          disabled: i === 3,
          label: item.replace(i + '', '单选' + i),
          value: i
        })
      }
      i++
    }
    param.pagingRef?.completeByNoMore(selectList.five, true)
  },
  sixSelect: async (param: Parameters<(SelectNS.Props['remoteMethod'] & {})>[0]) => {
    const fun = async () => {
      await awaitSetTimeout(150)
      const list = []
      for (let i = 0; i < config.selectBaseList.length; i++) {
        const item = config.selectBaseList[i]
        if (item.includes(param.text) || !param.text) list.push({
          label: item.replace(i + '', '多选' + i),
          value: { value: i, id: i }
        })
      }
      return list.slice((param.pageNo - 1) * param.pageSize, param.pageNo * param.pageSize)
    }

    return fun()
  },
}
</script>

<style scoped lang="scss" src="./index.scss"></style>